<template>
  <div class="friend-circle">
    <div class="user-info">
      <img class="avatar" :src="article.userImage" alt="avatar" />
      <div class="name">雪饼</div>
    </div>
    <div class="title">{{ article.article }}</div>
    <div class="content">{{ article.content }}</div>
    <div class="images-grid" v-if="article.images && article.images.length">
      <div v-for="(image, index) in article.images" :key="index" class="image-container" :style="{ backgroundImage: 'url(' + image + ')' }"></div>
    </div>
    <div class="comments">
      <div class="commentBtn">
        <div @click="addLike">{{ article.liked }}<img  v-if="!article.isLiked" src="@/assets/img/find/赞.png" alt=""><img v-if="article.isLiked" src="@/assets/img/find/赞了.png" alt=""></div>
        <img @click="showInput = !showInput" src="@/assets/img/find/评论.png" alt="">
      </div>
      <div class="commentInput" v-if="showInput">
        <el-input
          placeholder="请输入评论内容"
          v-model="commentInput"
          clearable>
        </el-input>
        <el-button type="success" @click="pushComment">发送</el-button>
      </div>
      
      <div class="comment" v-for="(comment, index) in article.commentList" :key="index">
        <strong>{{ comment.username }}:</strong> {{ comment.content }}
        <div class="comment-actions">
          <!-- <button @click="replyToComment(comment)">Reply</button> -->
          <button @click="delComment(comment.id)">Delete</button>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { addLiked, deleteComment, getComment, publishComment } from '@/network/publish';
export default {
  name: 'FriendCircle',
  props: {
    article: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      showInput: false,
      commentInput: '',
    };
  },
  mounted(){
    console.log(this.article);
  },
  methods: {
    replyToComment(comment) {
      // Implement your reply logic here
      console.log('Replying to: ', comment.username);
    },
    async addLike(){
      await addLiked(this.article.articleId)
      await getBlog()
    },
    // 发布评论
    async pushComment(){
      const userId = JSON.parse(localStorage.user).id
      await publishComment({
        articleId: this.article.articleId,
        content:this.commentInput,
        rootId: 0,
        toCommentUserId: this.article.userId,
        toCommentId: 0,
        createBy: userId
      })
      await getComment(this.article.articleId)
      this.$message({
          type: 'success',
          message: '发布成功!'
      });
    },
    async delComment(commentId){
      await deleteComment(this.article.articleId);
      this.$message({
          type: 'success',
          message: '删除成功!'
      });
    }
  },
};
</script>

<style scoped>
.friend-circle {
  background-color: white;
  border-radius: 20px;
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.friend-circle:hover {
  transform: translateY(-5px);
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin-right: 10px;
}

.title{
  font-size: 18px;
  font-weight: 800;
}

.name{
  font-size: 20px;
  font-weight: 800;
  
}

.images-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.image-container {
  background-size: cover;
  background-position: center;
  width: 100%;
  padding-top: 100%; /* Adjust padding to control aspect ratio */
  border-radius: 5px;
}

.comment {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.commentInput{
  display: flex;
  margin-top: 5;
}

.commentBtn{
  height: 30px;
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.commentBtn img{
  height: 30px;
  width: 30px;
}

.comment-actions button {
  margin-left: 10px;
}
</style>